<template>
  <div class="homes">
    <van-nav-bar title="微平台" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="contents">
        <h3 class="tit">工单处理</h3>
        <h4 class="smTit">
            工单信息
        </h4>
        <div class="infoItem">
            <label for="">工单标题：</label>
            <div class="infoCon">{{ baseInfo.bus_title }}</div>
        </div>
        <div class="infoItem">
            <label for="">工单编码：</label>
            <div class="infoCon">{{ baseInfo.bus_id }}</div>
        </div>
        <div class="infoItem">
            <label for="">工单类型：</label>
            <div class="infoCon" v-if="baseInfo.bus_second_type ==='0208'">业务订购争议判责确认任务单</div>
            <div class="infoCon" v-if="baseInfo.bus_second_type ==='0011'">整改工作申诉预警单</div>
            <div class="infoCon" v-if="baseInfo.bus_second_type ==='0012'">整改工作投诉预警单</div>
           <!-- <div class="infoCon" v-else>暂无类型</div>-->
        </div>
        <div class="infoItem">
            <label for="">工单细类：</label>

            <div class="infoCon" v-if="baseInfo.bus_third_type ==='02020801'">业务订购争议投诉</div>
            <div class="infoCon" v-if="baseInfo.bus_third_type ==='00001101'">整改工作申诉情况</div>
            <div class="infoCon" v-if="baseInfo.bus_third_type ==='00001202'">整改工作投诉情况</div>
           <!-- <div class="infoCon" v-else>暂无类型</div>-->
        </div>
        <div class="infoItem">
            <label for="">工单发起方：</label>
            <div class="infoCon">0057集团大音</div>
        </div>
        <div class="infoItem">
            <label for="">工单接收方：</label>
            <div class="infoCon">250江苏</div>
        </div>
        <div class="infoItem">
            <label for="">创建时间：</label>
            <div class="infoCon">{{ baseInfo.create_time }}</div>
        </div>
        <div class="infoItem">
            <label for="">要求处理时间：</label>
            <div class="infoCon">{{ baseInfo.deal_time_limit }}</div>
        </div>

         <div class="infoItem">
            <label for="">工单创建人：</label>
            <div class="infoCon">{{ baseInfo.create_user_name }}</div>
        </div> 
         <div class="infoItem">
            <label for="">联系方式：</label>
            <div class="infoCon">{{ baseInfo.create_user_contact_info }}</div>
        </div>  
         <div class="infoItem">
            <label for="">工单内容：</label>
            <div class="infoCon">{{ baseInfo.bus_content }}</div>
        </div>
        <div class="infoItem">
            <label for="">工单处理意见：</label>
            <div class="infoCon">{{ baseInfo.handling_opinion }}</div>
        </div>

        <!--<h4 class="smTit">
            大音平台下发附件：
        </h4>
        <div class="fileList">
            <span
             v-for="(item,index) in fileList"   
            >{{item.fileName}}</span>
        </div>-->
      <!--  <h4 class="smTit">
            处理结果附件：
        </h4>
        <div class="fileList">
            <span
                    v-for="(item,index) in fileList2"
            >{{item.fileName}}</span>
        </div>-->
        <h4 class="smTit">
            审核意见
        </h4> 
        <textarea class="approveInfo" v-model="approveFont"></textarea>
        <button class="approve" @click="approve">处理</button>
         <h4 class="smTit">
            流程信息
        </h4>
        <div class="flowList" v-if="flowList.length">
            <div class="flowItem" :key="index" v-for="(item,index) in flowList">
                 <div class="infoItem">
                    <label for="">节点名称：</label>
                    <div class="infoCon">{{ item.ACT_NAME_ }}</div>
                </div> 
                <div class="infoItem">
                    <label for="">办理人：</label>
                    <div class="infoCon">{{ item.ASSIGNEE_ }}</div>
                </div>
                <div class="infoItem">
                    <label for="">开始时间：</label>
                    <div class="infoCon">{{ item.START_TIME_ }}</div>
                </div>
                <div class="infoItem">
                    <label for="">结束时间：</label>
                    <div class="infoCon">{{ item.END_TIME_ }}</div>
                </div>
             <!--   <div class="infoItem">
                    <label for="">处理耗时：</label>
                    <div class="infoCon">{{ item.DURATION_ }}</div>
                </div>-->
                <!--<div class="infoItem">
                    <label for="">办理操作：</label>
                    <div class="infoCon" v-if="item.APPROVAL ==='0'">驳回</div>
                    <div class="infoCon" v-else-if="item.APPROVAL ==='1'">同意</div>
                    <div class="infoCon" v-else><span style="color:cornflowerblue">正在办理....</span></div>
                </div>-->
                <div class="infoItem">
                    <label for="">办理意见：</label>
                    <div class="infoCon">{{ item.REASON }}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import "@/api/index"
import {ref, reactive, toRefs, onMounted} from "vue"
import {useRouter, useRoute} from "vue-router"
import GetNetUtil from "../../../utils/GetNetUtil";

export default {
  setup() {
    let state = reactive({
      listData: [],
      approveFont:"",
      projectNo:"",
      fiId:"",
      baseInfo:{},
      baseInfoNew:{},
      approvalDTO:{},
      fileList:[],
      fileList2:[],
      //flowList:[{name:"工单名称：工单名称：工单名称：工单名称：工单名称：",id:"321"},{name:"341",id:"341"},{name:"1321",id:"1321"}]
      flowList:[]
    })
    //上个页面传递的id
      state.projectNo = useRoute().params.type;
    //查询工单详情
    getOrderDetail();
    //查询上传附件信息
   // getFileName();

    const router = useRouter();
    async function getOrderDetail(){
          GetNetUtil.requestPost("/workBench/get0208Order", "",{projectNo:state.projectNo}, getOrderDetail)
          async function getOrderDetail(resp) {
              if (resp.resultCode === "200") {
                  state.baseInfo=resp.data;
                  //state.fiId=state.baseInfo.fiId;
                /*  if (null != state.baseInfo.fileUrl && state.baseInfo.fileUrl != '') {
                      var files =state.baseInfo.fileUrl.split("|");
                      for(var i=0;i<files.length;i++){
                          let table = {};
                          table.fileName=files[i];
                          table.url="";
                          state.fileList.push(table);
                      }
                  }*/
                  //查询处理信息
                  getProc();
              }else {
                  console.log("查询详细内容出错",resp);
              }
          }
      }

    /*async function getFileName(){
          GetNetUtil.requestPost("/workBench/getUploadFileInfoPoList", "",{projectNo:state.projectNo}, getFileName)
          async function getFileName(resp) {
              if (resp.resultCode === "200") {
                  if (resp.data.length>0) {
                      for(var i=0;i<resp.data.length;i++){
                          let table = {};
                          table.fileName=resp.data[i].file_name;
                          table.url="";
                          state.fileList2.push(table);
                      }
                  }
              }else {
                  console.log("查询附件信息出错",resp);
              }
          }
      }*/
    async function getProc(){
          GetNetUtil.requestPost("/workBench/get0208Proc", "",{projectNo:state.projectNo}, getProc)
          async function getProc(resp) {
              if (resp.resultCode === "200") {
                  console.log(resp.data);
                  if (resp.data.length>0) {
                      for(var i=0;i<resp.data.length;i++){
                          let table = {};
                          table.ACT_NAME_=resp.data[i].node_name;
                          table.ASSIGNEE_=resp.data[i].user_name;
                          table.START_TIME_=resp.data[i].create_time;
                          table.END_TIME_=resp.data[i].deal_time;
                          //table.DURATION_=resp.data[i].opinion;
                      /*    if("1"==resp.data[i].deal_time.operation_type){
                              table.APPROVAL="转派";
                          }else if("-1"==resp.data[i].deal_time.operation_type){
                              table.APPROVAL="驳回";
                          }else if("0"==resp.data[i].deal_time.operation_type){
                              table.APPROVAL="通过";
                          }else if("2"==resp.data[i].deal_time.operation_type){
                              table.APPROVAL="分派";
                          }else{
                              table.APPROVAL="未知";
                          }
                          table.APPROVAL=resp.data[i].APPROVAL;*/
                          table.REASON=resp.data[i].opinion;
                          state.flowList.push(table);
                      }
                  }
              }else {
                  console.log("查询流程信息出错",resp);
              }
          }
      }

 /*   function approve(){
        approve();
    }*/
      //审核
      async function approve(){
          state.approvalDTO.taskId=state.baseInfo.id.toString();
          state.approvalDTO.dealUserBelong=0;
          state.approvalDTO.operationType=0;
          state.approvalDTO.originalFilesName="0";
          state.approvalDTO.filesName="";
          state.baseInfoNew.approvalDTO= state.approvalDTO;
          state.baseInfoNew.busId=state.baseInfo.bus_id;
          state.baseInfoNew.busType=state.baseInfo.bus_second_type;
          state.baseInfoNew.handlingOpinion=state.baseInfo.handling_opinion;
          state.baseInfoNew.opinion=state.approveFont;
          console.log(state.baseInfoNew);
          GetNetUtil.requestPost("/workBench/ApprovalTask0208", "",state.baseInfoNew, approve)
          async function approve(resp) {
              if (resp.data.resultCode === "1") {
                  console.log(resp);
                  alert("处理成功!");
                  router.push({name: "micro-orderPage"});
              }else {
                  alert("处理失败!");
                  router.push({name: "micro-orderPage"});
              }
          }
      }
    const onClickLeft = () =>  router.push({name: "micro-platform"});


    onMounted(()=>{

    })
    return {
      ...toRefs(state),
      onClickLeft,
      approve,
    }
  }

  ,
}
</script>

<style lang="scss" scoped>
.homes {
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;

  .nav-right {
    font-size: 8px;
    color: #ffffff;
  }
    .approveInfo{
        width: 100%;
        resize: none;
        border: 1px solid #ddd;
        height: 150px;
        margin-bottom: 20px;
        border-radius: 5px;
    }
  .contents {
    margin-top: 10px;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    background-color: #ffffff;
    width: 100%;
    height: calc(100% - 44px);
    padding: 0 5px;
    overflow-y: auto;
    .tit{
        text-align: left;
        font-size: 16px;
        margin-bottom: 15px;
        font-weight: 600;
    }
    .smTit{
        font-size: 14px;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 5px solid #f90;
        clear: both;
    }
    .approve{
        background: #f90;
        color: #fff;
        font-size: 12px;
        border: none;
        border-radius: 5px;
        width: 100px;
        height: 40px;
        display: block;
        float: right;
    }
    .fileList{
        font-size: 13px;
        padding: 0 5px;
        padding-bottom: 20px;
        span{
                 color: #999;
            margin-right: 10px;
        }
    }
    .infoItem{
        color: #999;
        display: flex;
        justify-content: left;
        align-items: self-start;
        margin-bottom: 10px;
        font-size: 13px;
        padding: 0 5px;
        padding-bottom: 10px;
        // border-bottom: 1px solid #ddd;
        label{
         
            width: 25%;
        }
        .infoCon{
            padding: 0 1px;
            width: 75%;
            word-break: break-all;
        }
    }
  }
}
.flowList{
    margin-bottom: 50px;
}
.flowItem{
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    .infoItem:last-child{
        margin-bottom: 0;
    }
}

</style>